<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pareto Graph</title>
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <script type="text/javascript" src="pareto.js"></script>
        <style>
            body {font-family:"Sans-serif";font-size:12px;} 
            h1 {font-size:12px;font-weight:bold;}
            text.point {font-size:10px;}
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
            


            .slider_val {
                border:1px solid black;
            }
            .slider_button {
                fill: lightgray;
                stroke: #111;
                stroke-width: 1.5;
                opacity: 1;
                cursor: pointer;
            }
            .slider_line {
                stroke-width: 1.5;
                stroke: #111;
            }
            
            .hide {visibility:hidden;}
            
            #sliders_table #graph_table {
                padding:0px;
                margin:0px;
            }
            #graph {
                padding:0px;
                margin:0px;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <form>
            <h1> Pareto graph <span id="job_id">(No job selected.)</span> </h1>
            <p>
                Select X axis:
                <select id="x_axis_name_dropdown">
                    <option value="1">None</option>
                </select>
                Select Y axis:
                <select id="y_axis_name_dropdown" >
                    <option value="1">None</option>
                </select>
                Show ID: <input id="display_id_checkbox" type="checkbox"/>
                Auto zoom all: <input id="auto_zoom_all_checkbox" type="checkbox"/>
                <button id="zoom_all" type="button">Zoom All</button> 
            </p>
        </form>
        <div id="xx"></div>
        <table id="sliders_table">
            <colgroup>
                <col width="70">
                <col width="50">     
                <col id="slider_col" >
                <col width="50">
            </colgroup>
            <tr>
                <td >Filter by ID</td>
                <td class="slider_val">0</td> 
                <td id="id_slider" class="slider"></td>    
                <td class="slider_val">1</td> 
            </tr>
        </table>
        
        <table id="graph_table">
            <colgroup>
                <col width="100%">
            </colgroup>
            <tr>
                <td id="graph"></td>
            </tr>
        </table>
        
    </body>
</html>







